<template>
  <div>
    <el-row :gutter="5">
      <el-col :span="6">
        <div class="grid-content bg-purple">
          <div class="app-container">
            <el-table
              class="themeList"
              :data="themeData"
              style="margin-bottom: 20px;"
              row-key="uuid"
              stripe
              highlight-current-row
              @current-change="handleCurrentChange"
              lazy
              border
              :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
            >
              <af-table-column prop="zoneTitle" label="主题域 > 主题集 > 主题">
              </af-table-column>
            </el-table>
            <pagination
              small
              v-show="themeTotalCount > 0"
              :total="themeTotalCount"
              :pager-count="5"
              layout="prev, pager, next,jumper"
              :page.sync="themeQueryParams.pageNum"
              :limit.sync="themeQueryParams.pageSize"
              @pagination="getListZone"
            />
          </div>
        </div>
      </el-col>
      <el-col :span="18">
        <div class="grid-content bg-purple">
          <div class="app-container">
            <el-row>
              <el-col :span="24">
                <div class="grid-content bg-purple-dark">
                  <div class="block">
                    <el-row>
                      <el-button
                        type="primary"
                        icon="el-icon-circle-plus-outline"
                        @click="handleCreateDefine"
                        style=" margin-bottom: 20px;"
                      >新建预指标
                      </el-button>
                      <el-select
                        style="width: 180px; margin-left: 10px;margin-bottom: 20px;"
                        v-model="queryParams.type"
                        clearable
                        placeholder="请选择预指标类型"
                      >
                        <el-option
                          v-for="item in options"
                          :key="item.value"
                          :label="item.label"
                          :value="item.value"
                        >
                        </el-option>
                      </el-select>
                      <el-select
                        style="width: 180px; margin-left: 10px;margin-bottom: 20px;"
                        v-model="queryParams.createType"
                        clearable
                        placeholder="请选择创建类型"
                      >
                        <el-option
                          v-for="item in createTypeOption"
                          :key="item.value"
                          :label="item.label"
                          :value="item.value"
                        >
                        </el-option>
                      </el-select>
                      <el-input
                        style="width: 180px; margin-left: 10px;margin-bottom: 20px;"
                        placeholder="请输入关键词搜索"
                        v-model="queryParams.keyword"
                      >
                      </el-input>
                      <el-button
                        style="margin-left: 10px;margin-bottom: 20px;"
                        type="primary"
                        icon="el-icon-search"
                        @click="loadDefineList"
                      >搜索
                      </el-button>
                      <el-button type="primary" style="margin-bottom:20px;" @click="batchDel"
                      >批量删除
                      </el-button>
                      <el-button
                        type="primary"
                        icon="el-icon-rank"
                        style="margin-bottom: 20px;"
                        @click="joinDimension"
                      >关联维度
                      </el-button>
                    </el-row>
                  </div>
                </div>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="24">
                <div class="grid-content bg-purple-light">
                  <el-table
                    class="relevanceData"
                    :data="tableData"
                    @selection-change="handleSelectionChange"
                    style="width: 100%"
                  >
                    <el-table-column align="center" type="selection" width="30">
                    </el-table-column>
                    <el-table-column
                      is="false"
                      prop="id"
                      label="序号"
                      align="center"
                      width="80"
                    ></el-table-column>
                    <el-table-column
                      prop="name"
                      label="预指标名称"
                      align="center"
                      width="100"
                    ></el-table-column>
                    <el-table-column
                      prop="uname"
                      align="center"
                      label="预指标简称"
                    ></el-table-column>
                    <el-table-column
                      prop="code"
                      align="center"
                      label="预指标代码"
                    ></el-table-column>
                    <el-table-column
                      prop="createType"
                      align="center"
                      label="创建类型"
                    ></el-table-column>
                    <el-table-column
                      prop="themeSetTitle"
                      align="center"
                      label="预指标所属主题"
                    ></el-table-column>
                    <el-table-column
                      prop="updateDate"
                      align="center"
                      label="更新时间"
                    ></el-table-column>
                    <el-table-column label="详细" type="expand">
                      <template slot-scope="props">
                        <el-form
                          label-position="left"
                          inline
                          class="demo-table-expand"
                        >
                          <el-form-item style="width:20%" label="预指标名称">
                            <span>{{ props.row.name }}</span>
                          </el-form-item>
                          <el-form-item style="width:23%" label="预指标简称">
                            <span>{{ props.row.uname }}</span>
                          </el-form-item>
                          <el-form-item style="width:22%" label="预指标代码">
                            <span>{{ props.row.code }}</span>
                          </el-form-item>
                          <el-form-item style="width:25%" label="预指标描述">
                            <span>{{ props.row.description }}</span>
                          </el-form-item>
                          <el-form-item style="width:10%" label="预指标所属主题">
                            <span>{{ props.row.themeSetTitle }}</span>
                          </el-form-item>
                          <el-form-item style="width:20%" label="创建人">
                            <span>{{ props.row.createBy }}</span>
                          </el-form-item>
                          <el-form-item style="width:23%" label="创建时间">
                            <span>{{ props.row.createDate }}</span>
                          </el-form-item>
                          <el-form-item style="width:22%" label="父指标ID">
                            <span>{{ props.row.parentId }}</span>
                          </el-form-item>
                          <el-form-item style="width:25%" label="创建类型">
                            <span>{{ props.row.createType | createType }}</span>
                          </el-form-item>
                          <el-form-item style="width:10%" label="预指标类型">
                            <span>{{ props.row.type | quotaType }}</span>
                          </el-form-item>
                          <!-- <el-form-item label="指标来源地址">
                            <span>{{ props.row.addr }}</span>
                          </el-form-item>
                          <el-form-item label="指标数据源ID">
                            <span>{{ props.row.datasourceId }}</span>
                          </el-form-item>
                          <el-form-item label="数据表字段别名表ID">
                            <span>{{ props.row.colnameId }}</span>
                          </el-form-item>
                          <el-form-item label="指标生成SQL语句">
                            <span>{{ props.row.qsql }}</span>
                          </el-form-item>
                          指标计算公式">
                          <span>{{ props.row.formula }}</span>
                          </el-form-item>
                          <el-form-item label="维度集合">
                            <span>{{ props.row.dimensions }}</span>
                          </el-form-item>
                          <el-form-item label="创建人">
                            <span>{{ props.row.createBy }}</span>
                          </el-form-item>
                          <el-form-item label="创建时间">
                            <span>{{ props.row.createDate }}</span>
                          </el-form-item>
                          <el-form-item label="创建类型">
                            <span>{{ props.row.createType }}</span>
                          </el-form-item>
                          <el-form-item label="更新时间">
                            <span>{{ props.row.updateDate }}</span>
                          </el-form-item> -->
                        </el-form>
                      </template>
                    </el-table-column>
                  </el-table>
                  <pagination
                    v-show="totalCount > 0"
                    :total="totalCount"
                    :page.sync="queryParams.pageNum"
                    :limit.sync="queryParams.pageSize"
                    @pagination="loadDefineList"
                  />
                </div>
              </el-col>
            </el-row>
            <div>
              <el-dialog
                title="选择生成方式"
                :visible.sync="dialogVisible"
                width="30%"
              >
                <span>
                  <el-divider style="color:#1890FF"><i class="el-icon-s-order"></i> 数据库</el-divider>
                  <el-button style="margin-left:30%;margin-right:20px"  icon="el-icon-document-copy" type="primary" plain  @click="libraryTable">库表</el-button>
                  <el-button  icon="el-icon-notebook-2" type="primary" plain >SQL语句</el-button>
                  <el-divider><i class="el-icon-s-cooperation"></i> 其他</el-divider>
                  <el-button style="margin-left:30%;margin-right:20px" icon="el-icon-set-up" type="primary" plain >指标</el-button>
                  <el-button  icon="el-icon-document-add" type="primary" plain  @click="openQuotaDialog">自定义</el-button>
                </span>
                <span slot="footer" class="dialog-footer"> </span>
              </el-dialog>
            </div>
          </div>
        </div>
      </el-col>
    </el-row>
    <!-- 创建自定义指标弹窗 -->
    <el-dialog
      width="40%"
      destroy-on-close
      center
      title="新增自定义预指标"
      :visible.sync="createQuotaVisible"
    >
      <quota-form
        @loadDefineList="loadDefineList"
        :themeId="themeId"
        @close="createQuotaVisible = false"
      ></quota-form>
    </el-dialog>
  </div>
</template>

<script>
import {
  deleteQuota,
  getDefineList,
  getQuerySource,
  selectQuota,
  queryQuotaType
} from '@/api/quota/define/define.js'
import { listCtSet } from '@/api/quota/theme_zone/zone.js'
import QuotaForm from '@/views/quota/define/defineQuotaForm.vue'

export default {
  name: 'define',
  props: {},
  watch: {
    tableData: {
      handler(newVal, oldVal) {
        if(newVal){
          newVal.forEach((item) => {
            if (item.parentId > 0) {
              selectQuota({ id: item.parentId }).then((res) => {
                // item.parentId = res.data.name;
              })
              if (item.createType == 1) {
                item.createType = '数据库表创建'
              } else if (item.createType == 2) {
                item.createType = '自定义创建'
              } else if (item.createType == 3) {
                item.createType = '根据指标创建'
              } else if (item.createType == 4) {
                item.createType = '根据语句创建'
              }
            }
          })
        }

      },
      immediate: true,
      deep: true
    }
  },
  components: { QuotaForm },
  filters: {
    quotaType(val) {
      if (val == 1) {
        return '元数据指标'
      } else if (val == 2) {
        return '业务指标'
      } else if (val == 3) {
        return '政策性指标'
      } else if (val == 4) {
        return '预测指标'
      }
    },
    createType(val) {
      if (val == 1) {
        return '数据库创建'
      } else if (val == 2) {
        return '自定义创建'
      } else if (val == 3) {
        return '根据指标创建'
      } else if (val == 4) {
        return '根据语句创建'
      }
    }
  },
  data() {
    return {
      createQuotaVisible: false,
      themeId: undefined,
      input: '',
      dialogVisible: false,
      themeTotalCount: 0,
      themeQueryParams: {
        pageNum: 1,
        pageSize: 10
      },
      totalCount: 0,
      tableData: [],
      themeData: [],
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        orderField: 'UPDATE_DATE',
        order: 'desc',
        themeId: undefined,
        keyword: '',
        type: undefined,
        createType: ''
      },
      options: [],
      createTypeOption: [
        {
          value: 1,
          label: '数据库表创建'
        },
        {
          value: 2,
          label: '自定义创建'
        },
        {
          value: 3,
          label: '根据指标创建'
        },
        {
          value: 4,
          label: '根据语句创建'
        }
      ],
      selectQuotaData: []
    }
  },
  computed: {},
  created() {
    this.loadDefineList()
    this.getListZone()
    queryQuotaType().then((res)=>{
      this.options = res.data
    })
  },
  mounted() {
  },
  methods: {
    //批量删除指标表
    batchDel() {
      this.$confirm('此操作将永久删除该预指标及预指标相关报表, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(async() => {
          let ids = []
          this.selectQuotaData.forEach((item) => {
            ids.push(item.id)
          })
          try {
            await deleteQuota(ids)
            this.$message('删除预指标成功')
            this.loadDefineList()
          } catch (error) {
            this.$message('删除预指标失败')
            console.log(error)
          }
          this.$message({
            type: 'success',
            message: '删除成功!'
          })
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
    },
    //打开新增指标表单
    openQuotaDialog() {
      this.dialogVisible = false
      this.createQuotaVisible = true
    },
    //选择指标数据
    handleSelectionChange(val) {
      this.selectQuotaData = val
    },
    //关联维度
    joinDimension() {
      if (this.selectQuotaData.length <= 0) {
        this.msgError('请先选择要关联维度的预指标')
      } else {
        let routerData = {
          quotaData: this.selectQuotaData
        }
        this.$router.push({ name: 'joinDimension', params: routerData })
      }
    },
    handleCurrentChange(val) {
      if (val.children == undefined && val.zoneDescription == undefined) {
        this.input = '当前选择的主题为"' + val.zoneTitle + '"'
        this.themeId = val.id
        //查询主题下指标
        this.queryParams.themeId = val.id
        this.loadDefineList()

        const h = this.$createElement
        this.$notify({
          title: '提示',
          message: h('i', { style: 'color: teal' }, this.input)
        })
      }
    },
    //加载主题域数据
    getListZone() {
      listCtSet(this.themeQueryParams).then((res) => {
        this.themeData = res.data.list
        this.themeTotalCount = res.data.totalCount
      })
    },
    //加载指标数据
    loadDefineList() {
      getDefineList(this.queryParams).then((res) => {
        let arr = []
        this.tableData = res.data.list
        this.tableData = this.tableData.forEach((item) => {
          getQuerySource({ id: item.id })
            .then((res) => {
              arr.push({ ...res.data, ...item })
              this.tableData = arr
              this.tableData.forEach((item) => {
                if (item.parentId > 0) {
                  selectQuota({ id: item.parentId }).then((res) => {
                    // item.parentId = res.data.name;
                  })
                } else if (item.parentId == 0) {
                  item.parentId = 5
                }
                if (item.createType == 1) {
                  item.createType = '数据库表创建'
                } else if (item.createType == 2) {
                  item.createType = '自定义创建'
                } else if (item.createType == 3) {
                  item.createType = '根据指标创建'
                } else if (item.createType == 4) {
                  item.createType = '根据语句创建'
                }
              })
            })
            .catch((error) => {
              this.$message('加载预指标数据失败')
            })
        })

        this.totalCount = res.data.totalCount
        this.queryParams.themeId = undefined
      })
    },
    //选择库表方式处理
    libraryTable() {
      let data = {
        themeId: this.themeId,
        tabComponent: 'tableColumn'
      }
      this.$emit('childData', data)
      this.dialogVisible = false
    },
    handleCreateDefine() {
      if (!this.themeId) {
        this.$message('请先选择主题')
        return
      }
      this.dialogVisible = true
    },
    dataChange(node) {
      console.log(node)
      if (node.length != 0) {
        if (node.length >= 2) {
          this.queryParams.datasourceId = node[1]
        }
      } else {
        this.queryParams.datasourceId = undefined
      }
    }
  }
}
</script>

<style lang="less" scoped>
.el-form--inline {
  /deep/ .el-form-item__label {
    display: block;
  }
}

.themeList.el-table {
  /deep/ tbody {
    display: inline-block;
    min-width: 100%;
  }

  /deep/ .cell {
    white-space: nowrap;
  }

  /deep/ td {
    display: block;
    min-width: 100%;

  }

  /deep/ .el-table__row {
    display: block;
    min-width: 100%;
  }
}

.demo-table-expand {
  font-size: 0;
}

.demo-table-expand label {
  width: 90px;
  color: #99a9bf;
}

.demo-table-expand .el-form-item {
  margin-right: 0;
  margin-bottom: 0;
}

/deep/ .el-dialog__header {
  background-color: #1890ff;

  .el-dialog__title {
    color: #fff;
  }
}

.el-table__body tr.current-row>td{
  background-color: #ff784a !important;
  color: #fff;
}

/* 用来设置当前页面element全局table 鼠标移入某行时的背景色*/
.el-table--enable-row-hover .el-table__body tr:hover > td {
  background-color: #f19944;
  /* color: #f19944; */ /* 设置文字颜色，可以选择不设置 */
}
/deep/ .el-table__body tr.current-row > td {
  background-color: #6eadff !important;
  color: #fff;
}
</style>
